<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/22
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>分类管理</title>

    <link href="/statics/css/bootstrap.css" rel="stylesheet"/>
    <link href="/statics/font/bootstrap-icons.css" rel="stylesheet" >

</head>
<body>
<%@include file="inc/nav.jsp"%>

<div class="container-fluid">
    <div class="row p-3 mt-3">
        <div class="col-3 col-lg-2">
            <%@include file="inc/menu.jsp"%>
        </div>
        <div class="col-9 col-lg-10">
            <div class="d-flex">
                <div class="input-group mr-auto w-50">
                    <form class="form-inline" action="/category/list" method="post">
                        <input type="text" name="name" class="form-control" placeholder="请输入查询条件">
                        <button type="submit" class="btn btn-success ml-2"><i class="bi-search"></i>查询</button>
                    </form>
                </div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addCategory"><i
                        class="bi-plus"></i>添加分类</button>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <table class="table table-hover table-bordered table-striped text-center">
                        <thead class="thead-dark">
                        <tr>
                            <th scope="col">序号</th>
                            <th scope="col">分类名</th>
                            <th scope="col">简介</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${requestScope.categoryList}" var="c" varStatus="vs">
                            <tr>
                                <td>${vs.count}</td>
                                <td>${c.name}</td>

                                <td class="text-truncate" style="max-width: 150px;">${c.description}</td>
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-warning text-white" href="#"
                                                              data-toggle="modal" data-target="#editCategory" category-id="${c.id}">
                                            <i class="bi-gear"></i>编辑</a>
                                        <a class="btn btn-sm btn-danger" href="/category/delete?id=${c.id}">
                                            <i class="bi-trash"></i>删除</a>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pagination justify-content-between">
                            <li class="page-item">
                                <a class="page-link rounded-pill" href="/category/list?currentPage=${requestScope.pager.previous}&name=${param.name}" tabindex="-1">上一页</a>
                            </li>
                            <li class="page-item"><a class="page-link rounded-pill">总共${requestScope.pager.pageCount}页，当前第${requestScope.pager.currentPage}页</a></li>
                            <li class="page-item">
                                <a class="page-link rounded-pill"href="/category/list?currentPage=${requestScope.pager.next}&name=${param.name}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="fixed-bottom bg-dark text-white">
    <p class="text-center p-3 m-0">
        超市管理系统
    </p>
</footer>
<!-- 添加分类Modal -->
<div class="modal fade" id="addCategory" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addCategoryForm" action="/category/add" method="post">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">分类名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control" placeholder="分类名">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">简介</label>
                        <div class="col-sm-10">
                            <textarea name="description" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="text-danger d-none alert">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑分类Modal -->
<div class="modal fade" id="editCategory">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑分类</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editCategoryForm" action="/category/edit" method="post">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">分类</label>
                        <div class="col-sm-10">
                            <input type="hidden" name="id">

                            <input type="text" name="name" class="form-control" placeholder="分类名">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">简介</label>
                        <div class="col-sm-10">
                            <textarea name="description" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="text-danger d-none alert">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="editButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<script src="/statics/js/jquery.js" type="text/javascript"></script>
<script src="/statics/js/bootstrap.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#addButton").click(function () {
            let error = "";
            let addForm = $("#addCategoryForm");
            if (addForm.find("input[name=name]").val() == "") {
                error += "请输入分类名<br>";
            }

            if (error != "") {
                addForm.find("div[class~=alert]").html(error);
                addForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                addForm.find("div[class~=alert]").addClass("d-none");
                addForm.submit();
            }

        });
        $("a[category-id]").click(function () {
            $.getJSON("/category", {id: $(this).attr("category-id")}, function (result) {
                $("#editCategoryForm").find("input[name=id]").val(result.data.id);
                $("#editCategoryForm").find("input[name=name]").val(result.data.name);
                $("#editCategoryForm").find("textarea[name=description]").val(result.data.description);
            });
        });
        $("#editButton").click(function () {
            let error = "";
            let editForm = $("#editCategoryForm");
            if (editForm.find("input[name=name]").val() == "") {
                error += "请输入分类名<br>";
            }

            if (error != "") {
                editForm.find("div[class~=alert]").html(error);
                editForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                editForm.find("div[class~=alert]").addClass("d-none");
                editForm.submit();
            }

        });
    });
</script>


</body>
</html>
